import {
  userFillColor,
  strokeColor,
  labelColor,
  deptTextColor,
  userLineWidth,
  userRadius,
  userFontSize,
  deptFontSize,
  userFontWeight,
  setState,
  addControlPoint
} from './common';

// 计算字符
const fittingString = (str, maxWidth, fontSize) => {
  const ellipsis = '...';
  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
  let currentWidth = 0;
  let res = str;
  const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
  str.split('').forEach((letter, i) => {
    if (currentWidth > maxWidth - ellipsisLength) return;
    if (pattern.test(letter)) {
      // Chinese charactors
      currentWidth += fontSize;
    } else {
      // get the width of single letter according to the fontSize
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth - ellipsisLength) {
      res = `${str.substr(0, i)}${ellipsis}`;
    }
  });
  return res;
};

// 获取完整内容
function getHoverText(type, custom_info) {
  let { user_name, user_dept, user_show_dept } = custom_info || {};
  const user_dept_list = user_dept?.split?.('\n');
  const first_dept = user_dept_list?.[0];
  const showdept =
    user_show_dept && user_dept_list?.includes?.(user_show_dept)
      ? getLastDept(user_show_dept?.split?.('-') || [])
      : getLastDept(first_dept?.split?.('-') || []);
  if (type === 'name') {
    return user_name || '';
  } else if (type === 'dept') {
    return showdept;
  }
}

// 获取默认内容
function getDetaultText(type, custom_info) {
  let { user_name, user_dept, user_show_dept, node_width } = custom_info || {};
  const user_dept_list = user_dept?.split?.('\n');
  const first_dept = user_dept_list?.[0];
  const showdept =
    user_show_dept && user_dept_list?.includes?.(user_show_dept)
      ? getLastDept(user_show_dept?.split?.('-') || [])
      : getLastDept(first_dept?.split?.('-') || []);
  if (type === 'name') {
    return fittingString(user_name || '', node_width, userFontSize);
  } else if (type === 'dept') {
    return fittingString(showdept, node_width, deptFontSize);
  }
}

// 获取最后一级部门
function getLastDept(list) {
  return list[list.length - 1];
}

G6.registerNode('user-some-node', {
  draw(cfg, group) {
    let { node_height, node_width } = cfg.custom_info || {};
    node_height = Number(node_height);
    node_width = Number(node_width);
    const rect = group.addShape('rect', {
      name: 'user-node',
      attrs: {
        fill: userFillColor,
        stroke: strokeColor,
        height: node_height,
        width: node_width,
        lineWidth: userLineWidth,
        radius: userRadius
      }
    });

    // 上部文字区域
    const topGroup = group.addGroup({
      name: 'user-top-group'
    });

    topGroup.addShape('text', {
      attrs: {
        text: getDetaultText('name', cfg.custom_info),
        x: 0.5 * node_width,
        y: 0.5 * node_height - 11,
        fontSize: userFontSize,
        textAlign: 'center',
        textBaseline: 'middle',
        fill: labelColor,
        fontWeight: userFontWeight
      },
      name: 'top-text',
      capture: true,
      draggable: true
    });

    // 下部文字区域
    const bottomGroup = group.addGroup({
      name: 'user-bottom-group'
    });
    bottomGroup.addShape('text', {
      attrs: {
        text: getDetaultText('dept', cfg.custom_info),
        x: 0.5 * node_width,
        y: 0.5 * node_height + 11,
        fontSize: deptFontSize,
        textAlign: 'center',
        textBaseline: 'middle',
        fill: deptTextColor
      },
      name: 'bottom-text',
      capture: true,
      draggable: true
    });
    addControlPoint(group, cfg);
    return rect;
  },
  setState(name, value, item) {
    setState({ name, value, item, node_name: 'user-node' });
    if (name === 'user-node-hover') {
      const group = item.get('group');
      const _model = item.getModel();
      const topText = group.find(e => e.get('name') === 'top-text');
      const bottomText = group.find(e => e.get('name') === 'bottom-text');
      if (value) {
        topText.attr({
          text: getHoverText('name', _model.custom_info)
        });
        bottomText.attr({
          text: getHoverText('dept', _model.custom_info)
        });
      } else {
        topText.attr({
          text: getDetaultText('name', _model.custom_info)
        });
        bottomText.attr({
          text: getDetaultText('dept', _model.custom_info)
        });
      }
    }
  }
});
